<!--
 * @Author: 张瑞
 * @Date: 2021-10-29 16:32:10
 * @LastEditors: huangl
 * @LastEditTime: 2022-01-10 15:57:18
 * @Description: file content
 * @FilePath: \vue2xComponents\src\modules\demo\views\cbA\cp4\cp4.vue
-->
<template>
  <div>
    <div>
      <button @click="handleClick">截屏</button>
      <button @click="enableWebRtc = !enableWebRtc">切换截屏模式</button>
      当前模式: {{ enableWebRtc ? "webrtc" : "html2canvas" }}
    </div>
    <div>
      <img :src="src" alt="" />
    </div>
  </div>
</template>

<script>
import ScreenShort from "js-web-screen-shot";
export default {
  data() {
    return {
      short: null,
      enableWebRtc: false,
      src: "",
    };
  },
  methods: {
    handleClick() {
      this.short = null;
      this.$nextTick(() => {
        this.short = new ScreenShort({
          enableWebRtc: this.enableWebRtc,
          completeCallback: (base64) => {
            this.src = base64;
          },
          closeCallback: () => {
            console.log("截图窗口关闭");
            console.log(this.short);
          },
        });
        console.log(this.short);
      });
    },
  },
};
</script>